<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<!-- 引入 axios库 -->
<script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>

<style>
* {
margin: 0;
padding: 0;
}

h1 {
    width: 1000px;
    height: 50px;
    font-family: '微软雅黑';
    color: rgba(0, 166, 255, 0.5);
    margin: 10px auto;
    text-align: center;
}

#box {
    position: relative;
    width: 1000px;
	height: 568px;
    border: 1px solid rgb(118, 0, 253);
    margin: 50px auto;
}

header {
    display: flex;
    height: 50px;
}

.sousuokuang {
    width: 80%;
    height: 90%;
    font-size: 25px;
    text-align: center;
    color: red;
}

.ssan {
    width: 20%;
    font-size: 25px;
    background-color: rgb(202, 153, 154);
}

.ssan:hover {
    background: rgba(2, 69, 255, 0.1);
}

section {
    height: 600px;
}

.table {
    width: 1000px;
    text-align: center;
}

.city {
    width: 100%;
    margin: 10px auto;
    padding: 10px;
    text-align: center;
    font-family: '楷体';
    font-size: 30px;
    color: darkcyan;
}

.sun {
    position: absolute;
    width: 200px;
    height: 200px;
    top: -150px;
}

th {
    color: rgba(253, 13, 13, 0.7);
}

li {
    list-style: none;
}

.title {
    width: 1600px;
}
td{
    height: 70px;
	border: 1px solid #ccc; /* 添加边框样式 */
	color: rgba(253, 13, 13, 0.7);
}
th {
  border: 1px solid #ccc; /* 添加边框样式 */
  color: rgba(253, 13, 13, 0.7);
}
table {
  border-collapse: collapse; /* 合并表格边框 */
}

td {
  height: 70px;
  border: 1px solid #ccc; /* 添加边框样式 */
  border-top: none; /* 去掉上边框 */
}
img {
	width: 40px;
}
</style>
</head>

<body>
<h1>七天天气预报</h1>
<div id="box">
<header>
<input type="text" class="sousuokuang" @keyup.enter='searchWeather' v-model='city' placeholder="请输入城市名称"><!-- 输入框 -->
<button class="ssan" @click='searchWeather'>查询</button><!-- 查询按钮 -->
</header>
<section>
<table  class="table"><!-- 天气预报表格 -->
<tr v-show=" city!='' ">
<th>日期 </th>
<th>星期</th>
<th>天气</th>
<th> </th>
<th>温度（°C）</th>
</tr>

        <tr v-for='item in alllist'>
            <td> {{item.date}} </td><!-- 显示日期 -->
            <td> {{item.week}} </td><!-- 显示星期 -->
            <td> {{item.wea}} </td><!-- 显示天气 -->
            <td>
            <img v-if="item.wea === '晴'" src="烈日.png" alt="晴天"><!-- 显示晴天图标 -->
            <img v-else-if="item.wea === '多云'" src="多云.png" alt="多云"><!-- 显示多云图标 -->
        	<img v-else-if="item.wea === '多云转阴'" src="浓云.png" alt="多云转阴"><!-- 显示多云转阴图标 -->
            <img v-else-if="item.wea === '阴'" src="云.png" alt="阴天"><!-- 显示阴天图标 -->
        	<img v-else-if="item.wea === '阴转多云'" src="云.png" alt="阴转多云"><!-- 显示阴转多云图标 -->
            <img v-else-if="item.wea === '晴转小雨'" src="小雨.png" alt="晴转小雨"><!-- 显示晴转小雨图标 -->
        	<img v-else-if="item.wea === '小雨'" src="大雨.png" alt="小雨"><!-- 显示小雨图标 -->
            </td>
            <td> {{item.tem}} </td><!-- 显示温度 -->
        
        </tr>

    </table>
</section>
</div>

<script>

var app = new Vue({
    el: '#box',
    data: {
        city: '',// 城市名称
        alllist: [], // 所有天气预报列表
    },
    methods: {
        searchWeather: function () {// 查询天气预报的方法
            var that = this
            axios.get('https://v0.yiketianqi.com/api?unescape=1&version=v9&appid=63379653&appsecret=Ifi1FyK9&city=' + this.city).then
                (function (res) {
                    //获取数据
                    console.log(res.data);
                    that.alllist = res.data.data // 将获取到的天气预报列表赋值给alllist变量
                    console.log(that.alllist);
                }, function (err) {
                    console.log(err);
                })
        }
    },
})
</script>
</body>
</html>